<!DOCTYPE html>
<html>
	<head>
		<title>Component Reposition</title>
		<script type="text/javascript" src="../js-lib/jquery/core/jquery-1.6.2.js"></script>
		<script type="text/javascript" src="plugin/component-reposition-plugin.js"></script>
		
		<link rel="stylesheet" type="text/css" href="style/style.css" />
	</head>
	<body>
		<table>
			<tr>
				<td>Reposition --- </td>
				<td>Component Id:</td>
				<td>
					<select id="cmpId" name="cmpId">
						<option value="red">red</option>
						<option value="blue">blue</option>
						<option value="green" selected="selected">green</option>
						<option value="orange">orange</option>
					</select>
				</td>
				<td>Relative to selector:</td>
				<td>
					<select id="relativeTo" name="relativeTo">
						<option value="#red" selected="selected">red</option>
						<option value="#blue">blue</option>
						<option value="#green">green</option>
						<option value="#orange">orange</option>
					</select>
				</td>
				<td>Offset "left,top":</td>
				<td><input type="text" id="offset" name="offset" value="0,0"/></td>
				<td>Position:</td>
				<td>
					<select id="pos" name="pos">
						<option value="top">Top</option>
						<option value="top-right">Top Right</option>
						<option value="top-left">Top Left</option>
						<option value="right">Right</option>
						<option value="left">Left</option>
						<option value="bottom">Bottom</option>
						<option value="bottom-right">Bottom Right</option>
						<option value="bottom-left">Bottom Left</option>
					</select>
				</td>
				<td>
					<input type="button" id="reposition" name="reposition" value="Reposition" />
				</td>
			</tr>
			<tr><td colspan="10" id="executing">&nbsp;</td></tr>
		</table>
		<div id="cmp-container">
			<div id="red" class="cmp1">id:red</div>
			<div id="blue" class="cmp2">id:blue</div>
			<div id="green" class="cmp3">id:green</div>
			<div id="orange" class="cmp4">id:orange</div>
		</div>
	</body>
	
	<script>
		$( document ).ready(function() {
			$( '#reposition' ).click(function() {
				var _cmpId = $( '#cmpId' ).val(),
					_relativeTo = $( '#relativeTo' ).val(),
					_offset = $( '#offset' ).val(),
					_pos = $( '#pos' ).val();
					
					
				$( '#' + _cmpId ).reposition(_relativeTo, _pos, _offset);
				
				$( '#executing' ).html("<u>Query fired</u>: $( '#" + _cmpId + "' ).reposition('" + _relativeTo + "', '" + _pos + "', '" + _offset + "')");
			});
			
		});
	</script>
</html>